<template>
  <view class="uni-cell border border-bottom" :class="{ 'border-bold': bold }">
    <view
      class="content box box-between"
      :class="{ pointer: !noPointer }"
      @tap="onCellTap"
    >
      <!-- 标题 -->
      <view class="title">{{ title }}</view>

      <!-- 右边 -->
      <view class="right box box-column-center">
        <!-- 插槽 -->
        <view class="value-content">
          <slot name="value"></slot>
        </view>

        <!-- 右箭头 -->
        <text class="icon icon-arrow-right ml-10" v-if="showArrow"></text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "uniCell",

  props: {
    title: {
      type: String,
      default: "",
    },

    url: {
      type: String,
      default: "",
    },

    showArrow: {
      type: Boolean,
      default: true,
    },

    bold: {
      type: Boolean,
      default: false,
    },

    noPointer: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    // 点击回调
    onCellTap() {
      if (this.url)
        return uni.navigateTo({
          url: this.url,
        });
      else this.$emit("cellTap");
    },
  },
};
</script>

<style lang="scss" scoped>
.uni-cell {
  .content {
    height: 100upx;
    line-height: 100upx;
    padding: 0 20upx;
  }
}
</style>
